---
title: Configuration
metaTitle: Configuration
description: How to setup and configure your Authenticator component.
supportedFrameworks: android|angular|flutter|react|react-native|swift|vue|svelte
---

import { InlineFilter } from '@/components/InlineFilter';
import { Alert, Tabs } from '@aws-amplify/ui-react';
import { FRAMEWORKS } from '@/data/frameworks';
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
import { InitialStateTabs } from './InitialStateTabs';
import LoginWeb from './loginMechanisms.web.mdx';
import LoginAndroid from './loginMechanisms.android.mdx';
import LoginFlutter from './loginMechanisms.flutter.mdx';
import LoginReactNative from './loginMechanisms.react-native.mdx';
import LoginSwift from './loginMechanisms.swift.mdx';
import SignupAndroid from './signUpAttributes.default.android.mdx';
import SignupAngular from './signUpAttributes.default.angular.mdx';
import SignupFlutter from './signUpAttributes.default.flutter.mdx';
import SignupReactNative from './signUpAttributes.default.react-native.mdx';
import SignupReact from './signUpAttributes.default.react.mdx';
import SignupSwift from './signUpAttributes.default.swift.mdx';
import SignupVue from './signUpAttributes.default.vue.mdx';
import SignupSvelte from './signUpAttributes.default.svelte.mdx';
import SignupExampleFlutter from './signUpAttributes.default.example.flutter.mdx';
import SignupExampleWeb from './signUpAttributes.default.example.web.mdx';
import SignupAllAndroid from './signUpAttributes.all.android.mdx';
import SignupAllAngular from './signUpAttributes.all.angular.mdx';
import SignupAllFlutter from './signUpAttributes.all.flutter.mdx';
import SignupAllReactNative from './signUpAttributes.all.react-native.mdx';
import SignupAllReact from './signUpAttributes.all.react.mdx';
import SignupAllSwift from './signUpAttributes.all.swift.mdx';
import SignupAllVue from './signUpAttributes.all.vue.mdx';
import SignupAllSvelte from './signUpAttributes.all.svelte.mdx';
import SignupAllExampleFlutter from './signUpAttributes.all.example.flutter.mdx';
import SignupAllExampleWeb from './signUpAttributes.all.example.web.mdx';
import SocialProviderFlutter from './socialProviders.flutter.mdx';
import SocialProviderReactNative from './socialProviders.react-native.mdx';
import SocialProviderWeb from './socialProviders.web.mdx';
import VariationWeb from './variation.web.mdx';
import HideSignupReactNative from './hidesignup.react-native.mdx';
import HideSignupSwift from './hidesignup.swift.mdx';
import HideSignupWeb from './hidesignup.web.mdx';
import TotpSwift from './totpIssuer.swift.mdx';
import TotpAndroid from './totpIssuer.android.mdx';

export async function getStaticPaths() {
  return getCustomStaticPath(frontmatter.supportedFrameworks);
}

{/*  `getStaticProps` is required to prevent "Error: getStaticPaths was added without a getStaticProps. Without getStaticProps, getStaticPaths does nothing" */}

export async function getStaticProps() {
  return { props: {} }
}

<Alert role="none" heading="Wait!">
  Did you follow the [quick start instructions](../../connected-components/authenticator#quick-start) to set up the Authenticator first?
</Alert>

## Initial State

By default, unauthenticated users are redirected to the Sign In flow. You can explicitly redirect to Sign Up or Forgot Password:

<InitialStateTabs />

## Login Mechanisms

<InlineFilter filters={['angular', 'react', 'vue', 'svelte']}>
  <LoginWeb />
</InlineFilter>
<InlineFilter filters={['android']}>
  <LoginAndroid />
</InlineFilter>
<InlineFilter filters={['flutter']}>
  <LoginFlutter />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <LoginReactNative />
</InlineFilter>
<InlineFilter filters={['swift']}>
  <LoginSwift />
</InlineFilter>

## Sign Up Attributes

<Alert role="none" heading="Zero Configuration">

The Authenticator [automatically infers](/connected-components/authenticator#step-1-configure-backend) `signUpAttributes` from `amplify pull`,
but can be explicitly defined as seen below.

</Alert>

The Authenticator automatically renders _most_ [Cognito User Pools attributes](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-attributes.html),
with the exception of `address`, `gender`, `locale`, `picture`, `updated_at`, and `zoneinfo`. Because these are often app-specific, they can be customized via [Sign Up fields](customization#sign-up-fields).

<Tabs.Container defaultValue="verification-attributes">
  <Tabs.List>
    <Tabs.Item value="verification-attributes">Verification Attributes</Tabs.Item>
    <Tabs.Item value="all-attributes">All Attributes</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="verification-attributes">
    By default, the Authenticator will still require any attributes required for
    verification, such as `email`, _even if `signUpAttributes` is empty_:
    <InlineFilter filters={['android']}>
      <SignupAndroid />
    </InlineFilter>
    <InlineFilter filters={['angular']}>
      <SignupAngular />
      <SignupExampleWeb />
    </InlineFilter>
    <InlineFilter filters={['flutter']}>
      <SignupFlutter />
      <SignupExampleFlutter />
    </InlineFilter>
    <InlineFilter filters={['react-native']}>
      <SignupReactNative />
    </InlineFilter>
    <InlineFilter filters={['react']}>
      <SignupReact />
      <SignupExampleWeb />
    </InlineFilter>
    <InlineFilter filters={['swift']}>
      <SignupSwift />
    </InlineFilter>
    <InlineFilter filters={['vue']}>
      <SignupVue />
      <SignupExampleWeb />
    </InlineFilter>
    <InlineFilter filters={['svelte']}>
      <SignupSvelte />
      <SignupExampleWeb />
    </InlineFilter>
  </Tabs.Panel>
  <Tabs.Panel value="all-attributes">
    <InlineFilter filters={['android']}>
      <SignupAllAndroid />
    </InlineFilter>
    <InlineFilter filters={['angular']}>
      <SignupAllAngular />
      <SignupAllExampleWeb />
    </InlineFilter>
    <InlineFilter filters={['flutter']}>
      <SignupAllFlutter />
      <SignupAllExampleFlutter />
    </InlineFilter>
    <InlineFilter filters={['react-native']}>
      <SignupAllReactNative />
    </InlineFilter>
    <InlineFilter filters={['react']}>
      <SignupAllReact />
      <SignupAllExampleWeb />
    </InlineFilter>
    <InlineFilter filters={['swift']}>
      <SignupAllSwift />
    </InlineFilter>
    <InlineFilter filters={['vue']}>
      <SignupAllVue />
      <SignupAllExampleWeb />
    </InlineFilter>
    <InlineFilter filters={['svelte']}>
      <SignupAllSvelte />
      <SignupAllExampleWeb />
    </InlineFilter>
  </Tabs.Panel>
</Tabs.Container>

<InlineFilter filters={['android']}>
  <TotpAndroid />
</InlineFilter>
<InlineFilter filters={['angular', 'react', 'vue', 'svelte']}>
  <SocialProviderWeb />

  <VariationWeb />

  <HideSignupWeb />
</InlineFilter>
<InlineFilter filters={['flutter']}>
  <SocialProviderFlutter />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <SocialProviderReactNative />

  <HideSignupReactNative />
</InlineFilter>
<InlineFilter filters={['swift']}>
  <HideSignupSwift />

  <TotpSwift />
</InlineFilter>